<template>
	<view class="container">
		<uni-notice-bar style="margin-bottom: 0;" :showIcon="true" :scrollable="true" :text="noticeText"></uni-notice-bar>
		<view class="top">
			<view class="top-queue">
				<text class='top-queue-text'>当前排队人数：223人</text>
				<text class='top-queue-text'>当前排队资金：20990U</text>
			</view>
		</view>
		<!-- 公告区 -->
		<view class="news">
			<view class="news-title">
				公告
			</view>
			<view class="news-item" v-for="(item,index) in newsList" :key='index'>
				<image class="news-item-image" src="../../static/index/notice.png" mode=""></image>
				<text class="news-item-text">{{item}}</text>
			</view>
		</view>

		<!-- 互动区 -->
		<view class="active">
			<image class="ball ball1 animated " :class="showBall?'heartBeat slow infinite':'rollOut  faster'" src='../../static/index/ball.png' />
			<image class="ball ball2 animated " :class="showBall?'heartBeat slow infinite':'rollOut  faster'" src='../../static/index/ball.png' />
			<image class="ball ball3 animated" :class="showBall?'heartBeat slow infinite':'rollOut  faster'" src='../../static/index/ball.png' />
			<view class="left">
				<view class="team">
					<image class="team-image" src="../../static/index/team.png" mode=""></image>
					<view class="team-text">
						我的团队
					</view>
				</view>
				<view class="team">
					<image class="team-image" src="../../static/index/money.png" mode=""></image>
					<view class="team-text">
						我的收益
					</view>
				</view>
			</view>
			<view class="active-button" @click="collectBall">收取互动</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeText: '从2020年4月1日期，提现日期改为每周一周三周五，大家悉知',
				newsList: ['关于充值>>>>', '关于提现>>>>', '提现时间更改>>>'],
				showBall: true,
				collectTimes: 0
			}
		},
		onLoad() {

		},
		methods: {
			collectBall() {
				if (this.collectTimes >= 3) {
					uni.showToast({
						title: '今天次数用完，明天再来哟！',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				this.collectTimes += 1;
				this.showBall = false;
				setInterval(() => {
					this.showBall = true
				}, 10000)
			}
		}
	}
</script>

<style>
	@import 'animate.css';

	page {
		background-color: #FFFFFF;
	}

	.top {
		width: 750upx;
		height: 400upx;
		background-image: url(../../static/index/topImage.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.top-queue {
		display: flex;
		justify-content: space-between;
	}
	
	.top-queue-text {
		width: 375upx;
		height: 100upx;
		text-align: center;
		font-size: 28upx;
		line-height: 100upx;
		color: #FFFFFF;
	}

	.news {
		width: 750upx;
		height: 400upx;
		display: flex;
		flex-direction: column;

	}

	.news-title {
		width: 750upx;
		height: 120upx;
		line-height: 120upx;
		font-weight: 32upx;
		font-weight: bold;
		text-align: center;
	}

	.news-item {
		display: flex;
		align-items: center;

	}

	.news-item-image {
		width: 40upx;
		height: 40upx;
		margin: 20upx;
	}

	.news-item-text {
		font-size: 28upx;
	}

	.active {
		width: 750upx;
		height: 750upx;
		background-image: url(../../static/index/tree.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
	}


	.ball {
		width: 100upx;
		height: 100upx;
		position: absolute;
	}

	.ball1 {
		top: 80upx;
		left: 300upx;
	}

	.ball2 {
		top: 130upx;
		left: 160upx;
	}

	.ball3 {
		top: 130upx;
		left: 470upx;
	}

	.left {
		display: flex;
		flex-direction: column;
		padding-top: 150upx;
	}

	.team {}

	.team-image {
		width: 60upx;
		height: 60upx;
	}

	.team-text {
		font-size: 20upx;
	}

	.active-button {
		width: 300upx;
		height: 100upx;
		position: absolute;
		bottom: 0;
		right: 0;
		background-image: url(../../static/index/palm.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #aa0000;
		text-align: center;
		font-size: 28upx;
		line-height: 85upx;

	}
</style>
